<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
</head>

<body>

    <form>
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

    <script src="../js/jquery-1.10.1.min.js"></script>

    <script type="text/javascript">
        //    功能说明:
        //    1. 点击'全选': 选中所有爱好
        //    2. 点击'全不选': 所有爱好都不勾选
        //    3. 点击'反选': 改变所有爱好的勾选状态
        //    4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        //    5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        //    6. 点击'提交': 提示所有勾选的爱好

        let $checkbox = $("[type=checkbox]");
        let $checkBoxItem = $("[name=items]");
        let $checkedAllBox = $("#checkedAllBox");
        $("#checkedAllBtn").click(function() {
            $checkbox.prop("checked", true)
        })
        $("#checkedNoBtn").click(function() {
            $checkbox.prop("checked", false)
        })
        $("#checkedRevBtn").click(function() {
            $checkBoxItem.each(function() {
                this.checked = !this.checked
            })
            $checkedAllBox.prop("checked", $checkBoxItem.filter(":checked").size() === 4)
        })
        $checkedAllBox.click(function() {
            $checkBoxItem.prop("checked", this.checked)
        })
        $checkBoxItem.click(function() {
            $checkedAllBox.prop("checked", $checkBoxItem.filter(":checked").size() === 4)
        })
    </script>
</body>

</html>